﻿@model WineStore.DAL.ShoppingCartViewModel
@using WineStore.Extends;
@{
    ViewBag.Title = "Shopping Cart";
    Layout = "~/Views/Shared/HomeLayout.cshtml";
}
<style type="text/css">
    table
    {
        position: relative;
        margin: 5px auto;
        width: 950px;
        color: Black;
    }
    tr
    {
        border-bottom: 1px solid PaleTurquoise;
    }
    td
    {
        padding: 10px auto;
        text-align: center;
    }
    th
    {
        font-size: 14px;
        font-weight: bold;
    }
    .contenttd
    {
        padding-top: 40px;
    }
    .total-price
    {
        padding-top: 40px;
    }
    .RefreshQuantity
    {
        background: url("../../Content/Images/icon_refresh_captcha.png") no-repeat scroll left center transparent;
        line-height: 27px;
        margin-left: 10px;
        padding: 5px 0 5px 35px;
    }
</style>
<script src="../../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler 
        $(".RemoveLink").click(function () {
            if (confirm("Are you sure delete " + $(this).attr("data-name") + " ?")) {
                // Get the id from the link 
                var recordToDelete = $(this).attr("data-id");
                if (recordToDelete != '') {
                    clearUpdateMessage();
                    // Perform the ajax post 
                    $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
            function (data) {
                // Successful requests get here 
                // Update the page elements 
                //--if (data.ItemCount == 0) {
                $('#row-' + data.DeleteId).fadeOut('slow');
                //--} else {
                //--    $('#item-count-' + data.DeleteId).text(data.ItemCount);
                //--}
                $('#totalcartitems').text('Cart:( ' + data.TotalCartItems + ' )');
                $('#cart-total').text(data.CartTotal);
                $('#update-message').text(htmlDecode(data.Message));
                $('#cart-status').text('Cart (' + data.CartCount + ')');
            });

                }
            }
        });

        $(".RefreshQuantity").click(function () {
            // Get the id from the link 
            var recordToUpdate = $(this).attr("data-id");

            //Set quantity number to 0 if input value is empty
            var countToUpdate = 0;
            if ($("#" + $(this).attr("txt-id")).val().trim() !== '') {
                countToUpdate = $("#" + $(this).attr("txt-id")).val();
            }

            if (recordToUpdate != '') {
                // Perform the ajax post 
                $.post("/ShoppingCart/UpdateCartCount", { "id": recordToUpdate, "cartCount": countToUpdate },
                function (data) {
                    // Successful requests get here 
                    // Update the page elements                        
                    if (data.ItemCount == 0) {
                        $('#row-' + data.DeleteId).fadeOut('slow');
                    }
                    $('#update-message').text(htmlDecode(data.Message));

                    //Only process the callback data when no server error occurs
                    if (data.ItemCount != -1) {
                        $('#totalcartitems').text('Cart:( ' + data.TotalCartItems + ' )');
                        $('#total-price-' + data.DeleteId).text(data.TotalPrice);
                        $('#cart-total').text(data.CartTotal);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    }
                });
            }
        });

        $(".EmptyCart").click(function () {
            if (confirm("Are you sure delete?")) {
                clearUpdateMessage();
                // Perform the ajax post 
                $.post("/ShoppingCart/EmptyCart",
            function (data) {
                // Successful requests get here 
                // Update the page elements 
                //--if (data.ItemCount == 0) {
                $('#yourcart').fadeOut('slow');
                $('#totalcartitems').text('Cart:( ' + data.TotalCartItems + ' )');
                $('#update-message').text(htmlDecode(data.Message));
            });
            }
        });
    });


    function clearUpdateMessage() {
        //Reset update-message area
        $('#update-message').text('');
    }
    function htmlDecode(value) {
        if (value) {
            return $('<div />').html(value).text();
        }
        else {
            return '';
        }
    }

    if (typeof String.prototype.trim !== 'function') {
        String.prototype.trim = function () {
            return this.replace(/^\s+|\s+$/g, '');
        }
    }     
</script>
@using (Html.BeginForm())
{
    <div style="height: 20px;">
        @for (int i = 0; i < Model.CartItems.Count; i++)
        { 
            <p style="color: Red;">
                @Html.ValidationMessageFor(model => model.CartItems[i].Count)
            </p> 
        }
    </div>
    <div style="color: Red; height: 20px; position: relative; margin-top: 15px;" id="update-message">
    </div>
    <fieldset style="position: relative; border: 1px solid lavender;">
        <legend style="color: Red; font-size: 17px;">YOUR CART Infomation</legend>
        <div id="yourcart">
            <table>
                <tr>
                    <th>
                        Image
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Price
                    </th>
                    <th>
                        Quantity
                    </th>
                    <th>
                        Total
                    </th>
                    <th>
                    </th>
                </tr>
                @{int ix = 0;}
                @foreach (var item in
Model.CartItems)
                {
                    <tr id="row-@item.RecordId">
                        <td>
                            @Html.ImageFor(model => "../../Content/Images/Products/" + item.Product.ProductImage, new { width = "50px", height = "100px;" })
                        </td>
                        <td class="contenttd">
                            @item.Product.ProductName
                        </td>
                        <td class="contenttd" id="price">
                            @item.Product.ProductPrice
                        </td>
                        <td class="contenttd">
                            @Html.TextBoxFor(model => model.CartItems[ix].Count,
           new
           {
               style = "width:30px; text-align:right;",
               onkeyup = "clearUpdateMessage();",
               onchange = "clearUpdateMessage();"
           })
                            <a href="#" class="RefreshQuantity" style="text-decoration:none;" data-id="@item.RecordId" txt-id="CartItems_@(ix)__Count">
                                &nbsp;</a>
                        </td>
                        <td id="total-price-@item.RecordId" class="total-price">
                            @(item.Product.ProductPrice * Model.CartItems[ix].Count)
                        </td>
                        <td class="contenttd">
                            <a href="#" class="RemoveLink" style="color:Red;" data-id="@item.RecordId" data-name="@item.Product.ProductName" txt-id="CartItems_@(ix)__Count">
                                Remove</a>
                        </td>
                    </tr>
                    ix++;
                }
                <tr>
                    <td>
                        @Html.ActionLink("Shopping...", "Index", "Home")
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td id="cart-total" style="font-size: 15px; font-weight: bold; width: 200px;">
                        Total Price:@Model.CartTotal
                    </td>
                    <td style="width: 150px;">
                        @Html.ActionLink("Checkout", "AddressAndPayment", "Checkout")&nbsp;&nbsp;&nbsp;
                        <a href="#" class="EmptyCart">EmptyCart</a>
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>
    
       
    
}